﻿<%@ Page Title="" Language="C#" MasterPageFile="~/_Default.Master" AutoEventWireup="true" CodeBehind="ArtWork.aspx.cs" Inherits="WebApplication.Setting.ArtWork" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        let typeTagData = [];
        let styleTagData  = [];
        let identityTagData  = [];
    </script>
    <link href="../Content/Css/setting.css" rel="stylesheet" />
    <script src="../Content/Scripts/sortable.min.js"></script>
    <script src="../Content/Scripts/setting.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="layui-row" style="width: 1200px;">
        <div class="layui-col-md10 layui-col-md-offset1 layui-col-sm10 layui-col-sm-offset1">
            <%--tab--%>
            <div class="layui-tab layui-tab-brief" lay-filter="tabMenu"></div>
            <%--信息更改--%>
            <div class="layui-panel mt-10">
                <div class="layui-row">
                    <div class="layui-col-md10 layui-col-md-offset1 layui-col-sm10 layui-col-sm-offset1">
                        <div class="router-wrapper" style="margin: 30px 0;">
                            <div class="inset-content" style="margin-bottom: 30px;">
                                ①设置顺序会影响你的
                                <a href="/Resume.aspx?id=<%=Session["UID"] %>" class="" target="_blank" style="text-decoration: underline;">接稿页
                                </a>
                                作品展示，数字越大越靠前展示
                                <br />
                                ②前4个作品会显示在
                                <a href="/Artists.aspx" class="" target="_blank" style="text-decoration: underline;">画师列表页
                                </a>
                                <br />
                                ③仅作品可以设置顺序
                            </div>
                            <div class="layui-row layui-col-space10 cover" id="cover">

                                <% if (artworks.Count > 0)
                                    { %>

                                <% foreach (Models.Artworks artwork in artworks)
                                    { %>
                                <div class="layui-col-md3">
                                    <div class="sort-item">
                                        <div class="cover-wrapper" style="background-image: url(<%=artwork.Cover.Substring(1)%>)" id="<%=artwork.ArtworkID %>"></div>
                                    </div>
                                </div>
                                <%} %>

                                <%}
                                    else
                                    { %>
                                <div class="empty"></div>
                                <%} %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            new Sortable(cover, {
                animation: 350
                , filter: ".empty"
                , onSort: function (/**Event*/evt) {
                    var itemEl = evt.item;  // dragged HTMLElement
                    let count = $('#cover').find('.cover-wrapper').length;
                    let postData = []
                    $('#cover').find('.cover-wrapper').each((index, item) => {
                        let id = $(item).attr("id");
                        let orderNum = count - index;
                        postData.push({
                            id, orderNum
                        })
                    })

                    var index = layer.load(1); //换了种风格

                    $.ajax({
                        url: "/Art/Handle.aspx",
                        method: "post",
                        data: {
                            action: "Sort",
                            data: JSON.stringify(postData)
                        },
                        success: (res) => {
                            layer.close(index);
                            layer.alert(res.msg, () => {
                                layer.closeAll();
                            });
                        }
                    })
                },
            });
        })
    </script>
</asp:Content>
